var imgCliper = function (o) {
	// o为图片对象
    if (typeof (o) === 'object' && o.tagName.toLowerCase() === 'img') { // 检测是否是图片类型的DOM对象
		// 当前显示图片的高度和宽度
        var iCurWidth = o.width, iCurHeight = o.height
        o.height = iCurHeight
		// 获取实际图片的高宽
        var oCreateImg = new Image()
        oCreateImg.src = o.src
        var iOrigWidth = oCreateImg.width, iOrigHeight = oCreateImg.height
        
        if (iCurWidth && iOrigWidth) { // 如果宽度为不为0 - 意味着加载成功
    			// 计算当前与实际的纵横比
            var scaleX = iCurWidth / iOrigWidth
            var scaleY = iCurHeight / iOrigHeight
			// 实现图片对象的包裹
			// 创建包裹div
            var oRelDiv = document.createElement('div')
            oRelDiv.style.position = 'relative'
            oRelDiv.style.width = iCurWidth + 'px'
            oRelDiv.style.height = iCurHeight + 30 + 'px'
            oRelDiv.style.top = '30px'
			// 定义ID方法
            var ID = function (id) {
                return document.getElementById(id)
            }
			// 插入到当前图片对象之前
            o.parentNode.insertBefore(oRelDiv, o)
			// 初始化坐标与剪裁高宽
            var cropW = 80, cropH = 80
            var posX = (iCurWidth - cropW) / 2, posY = (iCurHeight - cropH) / 2
			// 剪裁需要的HTML元素
            var sInnerHtml = '<div style="font-size:12px; position:absolute; display: none; top:-24px; right:0;">旋转：<input id="RotAngle" type="text" value="0" style="width:38px; height:15px; border:1px solid #a0b3d6; font-size:100%; padding:2px 0 1px 2px; margin-right:3px; color:#333333;" />度</div><canvas id="ImageCanvas" style="position:absolute;"></canvas><div id="CropBox" style="height:' + cropH + 'px; width:' + cropW + 'px; position:absolute; left:' + posX + 'px; top:' + posY + 'px; border:1px solid black;"><div id="DragBg" style="height:100%; background:white; opacity:0.3; filter:alpha(opacity=30); cursor:move;"></div><div id="dragLeftTop" style="position:absolute; width:4px; height:4px; border:1px solid #000; background:white; overflow:hidden; left:-3px; top:-3px; cursor:nw-resize;"></div><div id="dragLeftBot" style="position:absolute; width:4px; height:4px; border:1px solid #000; background:white; overflow:hidden; left:-3px; bottom:-3px; cursor:sw-resize;"></div><div id="dragRightTop" style="position:absolute; width:4px; height:4px; border:1px solid #000; background:white; overflow:hidden; right:-3px; top:-3px; cursor:ne-resize;"></div><div id="dragRightBot" style="position:absolute; width:4px; height:4px; border:1px solid #000; background:white; overflow:hidden; right:-3px; bottom:-3px; cursor:se-resize;"></div></div><input type="hidden" id="cropPosX" value="' + posX / scaleX + '" /><input type="hidden" id="cropPosY" value="' + posY / scaleY + '" /><input type="hidden" id="cropImageWidth" value="' + cropW / scaleX + '" /><input type="hidden" id="cropImageHeight" value="' + cropH / scaleY + '" />'
			// '
			// 嵌入HTML元素
            oRelDiv.innerHTML = sInnerHtml
			// 图片重新插入
            var oCanvas = ID('ImageCanvas')
            if (window.ActiveXObject && window.G_vmlCanvasManager) {
				// IE
                oCanvas = window.G_vmlCanvasManager.initElement(oCanvas) // 使IE支持动态创建的canvas元素
            }
            oRelDiv.insertBefore(o, oCanvas)

			// 拖拽与拉伸方法
			// 拖拽拉伸所需参数
            var params = {
                left: 0,
                top: 0,
                width: 0,
                height: 0,
                currentX: 0,
                currentY: 0,
                flag: false,
                kind: 'drag'
            }
			// 获取相关CSS属性方法
            var getCss = function (o, key) {
                return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o, false)[key]
            }
            var startDrag = function (point, target, kind) {    
				// point是拉伸点，target是被拉伸的目标，其高度及位置会发生改变
				// 此处的target与上面拖拽的target是同一目标，故其params.left,params.top可以共用，也必须共用
				// 初始化宽高
                params.height = params.width = getCss(target, 'width')
                // params.height = getCss(target, 'height')
				// 初始化坐标
                if (getCss(target, 'left') !== 'auto') {
                    params.left = getCss(target, 'left')
                }
                if (getCss(target, 'top') !== 'auto') {
                    params.top = getCss(target, 'top')
                }
                
				// target是移动对象
                point.onmousedown = function (event) {
                    params.kind = kind
                    params.flag = true
                    if (!event) {
                        event = window.event
                    }
                    var e = event
                    params.currentX = e.clientX
                    params.currentY = e.clientY
					// 防止IE文字选中，有助于拖拽平滑
                    point.onselectstart = function () {
                        return false
                    }
                    return false
                }
                document.onmouseup = function () {
                    params.flag = false
                    if (getCss(target, 'left') !== 'auto') {
                        params.left = getCss(target, 'left')
                    }
                    if (getCss(target, 'top') !== 'auto') {
                        params.top = getCss(target, 'top')
                    }
                    params.width = getCss(target, 'width')
                    params.height = getCss(target, 'height')

					// 给隐藏文本框赋值
                    posX = parseInt(target.style.left)
                    posY = parseInt(target.style.top)
                    cropW = parseInt(target.style.width)
                    cropH = parseInt(target.style.height)

                    if (posX < 0) {
                        posX = 0
                    }
                    if (posY < 0) {
                        posY = 0
                    }

					// 比例计算
                    posX = posX / scaleX
                    posY /= scaleY
                    cropW /= scaleX
                    cropH /= scaleY
					// 赋值
                    ID('cropPosX').value = posX
                    ID('cropPosY').value = posY
                    ID('cropImageWidth').value = cropW
                    ID('cropImageHeight').value = cropH
                }
                document.onmousemove = function (event) {
                    var e = event || window.event
                    if (params.flag) {
                        var nowX = e.clientX, nowY = e.clientY
                        var disX = nowX - params.currentX, disY = nowY - params.currentY
                        if (params.kind === 'nw') { // 左上拉伸
                            target.style.left = parseInt(params.left) + disX + 'px'
                            // target.style.width = parseInt(params.width) - disX + 'px'
                            target.style.top = parseInt(params.top) + disY + 'px'
                            target.style.height = target.style.width = parseInt(params.height) - disY + 'px'
                        } else if (params.kind === 'ne') { // 右上拉伸
                            target.style.top = parseInt(params.top) + disY + 'px'
                            target.style.height = target.style.width = parseInt(params.height) - disY + 'px'
							// 右
                            // target.style.width = parseInt(params.width) + disX + 'px'
                        } else if (params.kind === 'sw') { // 左下拉伸
                            target.style.left = parseInt(params.left) + disX + 'px'
                            target.style.width = target.style.height = parseInt(params.width) - disX + 'px'
							// 下
                            // target.style.height = parseInt(params.height) + disY + 'px'
                        } else if (params.kind === 'se') { // 右下拉伸
                            target.style.width = target.style.height = parseInt(params.width) + disX + 'px'
                            // target.style.height = parseInt(params.height) + disY + 'px'
                        } else { // 移动
                            target.style.left = parseInt(params.left) + disX + 'px'
                            target.style.top = parseInt(params.top) + disY + 'px'
                        }
                    }
                }
            }
			// 绑定拖拽
            startDrag(ID('DragBg'), ID('CropBox'), 'drag')
			// 绑定拉伸
            startDrag(ID('dragLeftTop'), ID('CropBox'), 'nw')
            startDrag(ID('dragLeftBot'), ID('CropBox'), 'sw')
            startDrag(ID('dragRightTop'), ID('CropBox'), 'ne')
            startDrag(ID('dragRightBot'), ID('CropBox'), 'se')

			// 图片不能被选中，目的在于使拖拽顺滑
            ID('ImageCanvas').onselectstart = function () {
                return false
            }
            o.onselectstart = function () {
                return false
            }
            return {
                x: $('#cropPosX'),
                y: $('#cropPosY'),
                w: $('#cropImageWidth'),
                h: $('#cropImageHeight')
            }
        }
    }
}

export default imgCliper
